<template>
	<view class="search">
		<view class="searchInput">
			<view class="search-top">
				<view class="icon" @click="HandleReturn">
					<uni-icons type="left" size="30" style="margin-right: 20rpx;"></uni-icons>
				</view>
				<view class="title">{{title}}</view>
			</view>
			<view class="search_icons">
				<view class="icon">
					<uni-icons type="search" size="20" color="#797979"></uni-icons>
				</view>
				<input class="uni-input" v-model="keyWord" placeholder="搜索" />
				<view @click="getList" class="search">搜索</view>
			</view>
		</view>
		<view class="search-placeholder">
			<text>
				勾选任务，生成今日任务
			</text>
		</view>
		<up-loadmore status="loading" v-if="isLoading" />
		<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else-if="pageList.length == 0">
		</up-empty>
		<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="false" @scroll="scroll" v-else>
			<view class="item" v-for="item in pageList" :key="item.id">
				<view class="item-top">
					<text>{{item.createTime}}</text>
					<text style="#28C445" v-if="item.execStatus == 1">进行中</text>
					<text style="#28C445" v-if="item.execStatus == 2">已提交</text>
					<text style="#FF8A00" v-if="item.execStatus == 3">待审批</text>
					<text style="#28C445" v-if="item.execStatus == 4">驳回</text>
					<text style="#28C445" v-if="item.execStatus == 5">已维保</text>
					<text style="#28C445" v-if="item.execStatus == 6">已完成</text>
					<text style="color: #325EF5;" v-else>待开始</text>
				</view>
				<view class="item-name">
					{{item.clientName?item.clientName:'暂无公司'}}
				</view>
				<view class="item-address">
					{{item.clientAddress}}
				</view>
				<view class="item-time">
					<text>预约上门时间：</text>
					<text>{{item.planStartDate}}</text>
				</view>
				<view class="item-type">
					维保名目
				</view>
				<view>
					{{item.planName}}
				</view>
				<!-- <view class="item-imgs">
					<image src="https://abc-img.jia.com/static/image/semtf/scheme_01.jpg" mode=""></image>
					<image src="https://abc-img.jia.com/static/image/semtf/scheme_02.jpg" mode=""></image>
				</view> -->
				<view class="item-btn">
					<checkbox :value="item.isCheck" :checked="item.isCheck" iconColor="#ffffff"
						activeBackgroundColor="#325EF5" @click="checkboxHandler(item)" />
					选择此任务
				</view>
			</view>
		</scroll-view>

		<!-- 提交 -->
		<view class="submit">
			<view class="submit-count">
				<text>已选任务：</text>
				<text>{{taskCount.length}}</text>
				<text>个</text>
			</view>
			<view class="submit-btn">
				<button @click="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import toSafe from '@/compoents/top-safe.vue'
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		monthlyInspection,
		annualInspection,
		submitCheckList,
		getAnnualInspection
	} from '@/api/inspection.js'
	let {
		value: title
	} = ref()
	let {
		value: keyWord
	} = ref('')
	let pageList = reactive([])
	let {
		value: pageType
	} = ref('')
	let taskCount = reactive([])
	let newPageList = reactive([{
		id: 0,
		createTime: '2021-25-36',
		execStatus: 0,
		clientName: '的王炯',
		clientAddress: '几次额搜计划',
		planStartDate: '20556-489-59',
		planName: '多岁好事多',
		isCheck: false,
		checkPoint: '',
		classifyId: 0,
		delFlag: 0,
	}])
	let isLoading = ref(false)


	onShow((e) => {
		getList()
	})
	onLoad((e) => {
		pageType = e.type
		getList()
	})
	onMounted(() => {})
	const getList = () => {
		switch (pageType) {
			case 'month':
				title = '我要月检'
				getMonthList()
				break;
			case 'year':
				title = '我要年检'
				getAnnualList()
				break;
		}
	}
	// 获取月检列表
	const getMonthList = () => {
		isLoading.value = true
		monthlyInspection(keyWord).then(res => {
			if (res.code == 200) {
				pageList.splice(0, pageList.length, ...res.rows)
			}
			isLoading.value = false
		})
	}
	// 获取年检列表
	const getAnnualList = () => {
		isLoading.value = true
		annualInspection(keyWord).then(res => {
			if (res.code == 200) {
				pageList.splice(0, pageList.length, ...res.rows)
			}
			isLoading.value = false
		})
	}
	// 页面滚动
	const scroll = () => {

	}
	const submit = () => {
		if (taskCount.length == 0) {
			uni.showToast({
				title: '请先选择任务后再提交！',
				icon: 'none'
			})
			return
		}
		submitCheckList(taskCount).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '提交成功！'
				})
				getList()
				taskCount.splice(0)
			}
		})
	}
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}

	// 点击复选框选择项目
	const checkboxHandler = (item) => {
		let index = taskCount.indexOf(item.id)
		if (index !== -1) {
			taskCount.splice(index, 1)
		} else {
			taskCount.push(item.id)
		}
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	// /deep/ uni-checkbox .uni-checkbox-input {
	// 	border-radius: 2.5rem !important;
	// 	width: 0.9375rem;
	// 	height: 0.9375rem;
	// }

	.search {
		width: 100%;
		height: 100%;
		background: #F6F8FA;

		.searchInput {
			width: 100%;
			height: 276rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background-color: #fff;

			// position: fixed;
			// top: 0;
			// left: 0;
			padding: 20rpx;
			padding-top: 80rpx;
			z-index: 99;

			.search-top {
				// height: 88rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 10vw;
					height: 88rpx;
					line-height: 88rpx;
					z-index: 1;
				}

				.title {
					width: 90vw;
					line-height: 88rpx;
					height: 88rpx;
					text-align: center;
					margin-left: -8vw;
					font-size: 34rpx;
					font-weight: 700;
				}
			}

			.search_icons {
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}
		}

		.search-placeholder {
			width: 100%;
			height: 60rpx;
			background-color: #cfd9f9;
			font-size: 28rpx;
			color: #325EF5;
			text-align: center;
			line-height: 60rpx;
		}

		.scroll-Y {
			padding: 0 28rpx 128rpx 28rpx;
			height: calc(100% - 260rpx);

			.item {
				margin-top: 20rpx;
				height: 400rpx;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 20rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.item-top {
					.inline_space_between();

					& text:nth-child(2) {
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.item-name,
				.item-type {
					font-size: 30rpx;
					color: #325EF5;
				}

				.item-time {
					.inline_space_between()
				}

				.item-imgs {
					display: flex;

					image {
						width: 94rpx;
						height: 94rpx;
						margin-right: 16rpx;
					}
				}

				.item-btn {
					display: flex;
					justify-content: flex-end;

					button {
						margin: 0 20rpx;
						width: 240rpx;
						height: 64rpx;
						line-height: 64rpx;
						border-radius: 12rpx;
					}

					button:nth-child(1) {
						background-color: #fff;
						border: 1px solid #325ef5;
						color: #325ef5;
					}

					button:nth-child(2) {
						background-color: #325ef5;
						border: 1px solid #325ef5;
						color: #fff;
					}

					.change-ok {
						opacity: 0.5;
					}
				}

			}
		}

		.submit {
			height: 128rpx;
			width: 100%;
			background-color: #fff;
			.inline_space_between();
			padding: 20rpx 28rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.submit-count {
				text {
					color: #325EF5;
				}

				text:nth-child(1) {
					font-size: 24rpx;
				}

				text:nth-child(2) {
					font-size: 36rpx;
				}

				text:nth-child(3) {
					font-size: 26rpx;
				}
			}

			.submit-btn {
				width: 400rpx;
				height: 88rpx;

				button {
					width: 100%;
					height: 100%;
					background-color: #325EF5;
					border-radius: 16rpx;
					color: #fff;
				}
			}
		}

		.uni-list {
			height: 80rpx;
		}
	}
</style>